<template>

  <div id="tmpl">
      <div id="postcomment">
          <h3>提交评论</h3>
          <p class="p"></p>
          <textarea placeholder="请输入您要评论的内容" v-model="postcontent"></textarea>
            <mt-button type="primary" size="large" @click="postcomment">发表</mt-button>
      </div>
      <div class="list">
      <h3>评论列表</h3>
      <p class="p"></p>
        <div v-for="(item,index) in list">
          <div class="title">
            <span>第{{index+1}}楼:</span>
            <span>用户:{{item.user_name}}</span>
            <span>发表时间:{{item.add_time | datefmt('YYYY-MM-DD hh:mm:ss')}}</span>
	        </div>
          <ul class="mui-table-view">
				      <li class="mui-table-view-cell" v-text="item.content"></li>
	        </ul>
        </div>
      </div>
      <div>
        <mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>
      </div>
  </div>
</template>

<script>
import common from "../../kits/common.js";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      pageindex:1,
      postcontent: "",
      list:[]
    };
  },
  props: ["id"],
  created(){
      //获取当前评论列表的数据
      this.getcommentlist(1);
  },
  methods: {
    //3.0加载更多
    getmore(){
      this.pageindex++;
      this.getcommentlist(this.pageindex);
    },
    //2.0 获取当前评论的数据
    getcommentlist(pageindex){
      pageindex = pageindex || 1;
      //确定评论的url
      var url = common.apidomain + '/api/getcomments/'+this.id+'?pageindex='+pageindex;
      this.$http.get(url).then(function(res){
          if(res.body.status!=0){
            Toast(res.body.message);
            return;
          }
          this.list = this.list.concat(res.body.message);
      })
    },
    //1.0 评论数据的提交
    postcomment() {
      //判断用户是否填写评论内容
      if (this.postcontent.trim().length <= 0) {
        Toast("您要评论的内容不能为空");
        return;
      }

      var url = common.apidomain + "/api/postcomment/" + this.id;
      this.$http
        .post(url, { content: this.postcontent }, { emulateJSON: true })
        .then(function(res) {
          Toast(res.body.message);
         
          //3.0 将最新的评论追加到列表的最顶部
          this.list = [{
            'user_name':'匿名用户',
            'add_time':new Date(),
            'content':this.postcontent
          }].concat(this.list);
           //4.0将文本框中的内容清空
          this.postcontent = "";
        });
    }
    
  }
};
</script>

<style scoped>
#postcomment {
  padding: 5px;
}
.p {
  height: 1px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.title {
  color: #6d6d72;
  font-size: 15px;
  padding: 5px;
}
.list{
  padding: 5px;
}
</style>

